<template>
  <model
    :title="titleList[model]"
    :visible="visible"
    @close="handelColse"
    @submit="submit"
  >
    <div slot="content">
      <a-form >
        <a-row >
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">路由名称：</div>
              <a-input class="form_input" :value="form.name" :default-value="form.name" v-model="form.name" placeholder="请输入路由名称" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">路由path：</div>
              <a-input class="form_input" :value="form.path" :default-value="form.path" v-model="form.path" placeholder="请输入路由path" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">请选择icon</div>
              <a-popover trigger="click">
                <template slot="content">
                  <icon-selector v-model="form.icon" @change="handelChangeIcon" style="width: 500px"></icon-selector>
                </template>
                <a-input class="form_input" :value="form.icon" :default-value="form.icon" v-model="form.icon" placeholder="请选择图标" />
              </a-popover>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">上级路由：</div>
              <a-select
                show-search
                placeholder="请选择上级路由"
                :default-value="form.parentId"
                style="width: 60%"
                :show-arrow="false"
                :not-found-content="null"
                @change="handleRouterChange"
              >
                <a-select-option :value="item.id" v-for="(item,index ) in tabledata" :key="index">
                  <span style="float: left">{{ item.name }}</span>
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">指向文件：</div>
              <a-input class="form_input" :value="form.component" :default-value="form.component" v-model="form.component" placeholder="请输入路由的指向路径" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">是否显示：</div>
              <a-switch v-model="form.status" :value="form.status"></a-switch>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">路由排序：</div>
              <a-input class="form_input" :value="form.sort" :default-value="form.sort" v-model="form.sort" placeholder="数字越小越靠上" />
            </div>
          </a-col>
          <a-col :span="24">
            <div class="form_item">
              <div class="form_title">备注：</div>
              <a-input
                class="form_textarea"
                v-model="form.describe"
                :default-value="form.describe"
                :value="form.describe"
                type="textarea"
                placeholder="请输入名称" />
            </div>
          </a-col>
        </a-row>

      </a-form>
    </div>
  </model>
</template>

<script>
import { Model } from '@/components'
import { getMenuList, addMenu, settingMenu } from '@/api/menu'
import IconSelector from '@/components/IconSelector/IconSelector'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Number,
      default: () => 0
    },
    formData: {
      type: [String, Object],
      default: () => {}
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          this.getMenuListInit()
        }
      }
    }
  },
  data () {
    return {
      titleList: ['新建', '编辑'],
      form: {
        id: 0,
        name: '',
        parentId: 0,
        icon: '',
        component: '',
        describe: '',
        sort: '',
        status: true,
        path: ''
      },
      tabledata: [],
      modelWidth: this.$store.getters.modelWidth
    }
  },
  created () {
    this.getMenuListInit()
  },
  components: {
    IconSelector,
    Model
  },
  activated () {
    console.log('hello')
  },
  methods: {
    setData (val) {
      const data = JSON.parse(val)
      this.form.id = data.id
      this.form.name = data.name
      this.form.parentId = data.parentId
      this.form.icon = data.icon
      this.form.component = data.components
      this.form.path = data.path
      this.form.sort = data.sort
      this.form.describe = data.describe
      if (data.status === 0) {
        this.form.status = true
      } else {
        this.form.status = false
      }
    },
    handelColse () {
      this.form = {
        id: 0,
        name: '',
        parentId: 0,
        icon: '',
        component: '',
        describe: '',
        sort: '',
        status: true,
        path: ''
      }
      this.$emit('cancel')
    },
    getMenuListInit () {
      getMenuList({
        page: 1,
        pageSize: 10
      }).then(res => {
        if (res.code === 200) {
          const tablist = [{
            name: '根菜单',
            id: 0
          }]
          if (res.data.list.length > 0) {
            for (var i in res.data.list) {
              tablist.push({
                name: res.data.list[i].name,
                id: res.data.list[i].id
              })
            }
          }
          this.tabledata = tablist
        }
      })
    },
    submit () {
      const status = this.form.status ? 0 : 1
      if (this.model === 0) {
        addMenu({
          name: this.form.name,
          parentId: this.form.parentId,
          icon: this.form.icon,
          url: this.form.component,
          path: this.form.path,
          sort: this.form.sort,
          describe: this.form.describe,
          status: status
        }).then(res => {
          this.handelColse()
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.getMenuListInit()
          } else {
            this.$message.error('添加失败')
          }
        })
      } else {
        settingMenu({
          id: this.form.id,
          name: this.form.name,
          parentId: this.form.parentId,
          icon: this.form.icon,
          url: this.form.component,
          path: this.form.path,
          sort: this.form.sort,
          describe: this.form.describe,
          status: status
        }).then(res => {
          this.handelColse()
          if (res.code === 200) {
            this.$message.success('编辑成功')
            this.getMenuListInit()
          } else {
            this.$message.error('编辑失败')
          }
        })
      }
    },
    handleChange (value) {
      this.form.icon = value
    },
    handleRouterChange (e) {
      this.form.parentId = e
    },
    // 切换图标函数
    handelChangeIcon (e) {
      this.form.icon = e
    }
  }
}
</script>
<style lang='less' scoped>

.form_item{
  display: flex;
  justify-content: left;
  align-items: center;
  min-height: 70px;
  .form_title{
    width: 70px;
  }
  .form_input{
    width: 60%;
  }
  .form_textarea{
    width: 80%;
    height: 60px;
    margin: 20px 0;
  }
}

/deep/.ant-select-selection-selected-value{
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
}

</style>
